<template>
  <div class="alar-box">
    <div class="add-user-btn" @click="openSnapModel(1)">
      <span>新建用户库</span>
    </div>
    <el-table
        max-height="734"
        :data="tableData"
        style="
        width: 100%;
        margin-top: 12px;
        background-color: #303136;
        color: #ffff;
      "
        :border="false"
    >
      <el-table-column prop="typeName" label="人员库"></el-table-column>
      <el-table-column prop="opration" label="操作">
        <template slot-scope="scope">
          <span class="opration-btn" @click="openSnapModel(3, scope.row)">重命名</span>
          <span class="opration-btn" @click="openAddModel(3, scope.row)">注册人脸</span>
          <el-popconfirm
              title="确认删除此人员库信息吗？"
              @confirm="delSnapUser(scope.row)"
          ><span class="opration-btn" slot="reference">删除</span>
          </el-popconfirm>
        </template>
      </el-table-column>
      <el-table-column prop="warn" label="预警状态">
        <template slot-scope="scope">
          <el-switch
              active-color="#5CFBFF"
              inactive-color="#72777D"
              v-model="scope.row.isWarn"
              active-text="启用"
              inactive-text="禁用"
              @change="onChangeSwitch(scope.row, $event)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="预警规则">
        出现则预警
      </el-table-column>
      <!-- <el-table-column prop="alert" label="警报声">
        <template slot-scope="scope">
          <el-switch
              active-color="#5CFBFF"
              inactive-color="#72777D"
              v-model="scope.row.alert"
              @change="onChangeSwitch2(scope.row, $event)"
          ></el-switch>
        </template>
      </el-table-column> -->
    </el-table>

    <div class="table-pagination">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="pageSizeArr"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
      >
      </el-pagination>
    </div>
    <el-dialog
        :close-on-click-modal=false
        :modal-append-to-body="false"
        :title="dialogTitle"
        :visible.sync="visible"
        width="35%"
    >
      <snap-user-setting
          v-if="visible"
          :modeType="modeType"
          :snapUserInfo="currentUserInfo"
          @onClose="closeModel"
      ></snap-user-setting
      >
    </el-dialog>


    <el-dialog
        :close-on-click-modal=false

        :modal-append-to-body="false"
        title="注册人脸"
        :visible.sync="addVisible"
        width="35%"
        @close="closeRegisterModel"
    >
      <register-face ref="registerFace"
                     @onClose="closeRegisterModel"
                     :typeId="typeId"
      ></register-face>
    </el-dialog>
  </div>
</template>

<script>
import SnapUserSetting from "./components/SnapUserSetting.vue";
import RegisterFace from "./components/RegisterFace.vue";
import {getSnapUserList, delSnapUser, editSnapUser, switchStatus} from "@/api/user";

export default {
  components: {
    SnapUserSetting,
    RegisterFace
  },
  data() {
    return {
      radio1: 1,
      typeId:null,
      visible: false,
      addVisible: false,
      dialogTitle: "新增人员库",
      modeType: 0,
      currentUserInfo: {},
      imageUrl: "",
      path: "",
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      pageSizeArr: [10, 20, 30, 40, 50, 60],
      totalCount: 0,
    };
  },
  mounted() {
    this.getSnapUserList();
  },
  methods: {
    closeRegisterModel() {
      this.addVisible = false;
      this.$refs.registerFace.cancelModel()
    },
    closeModel(e) {
      this.visible = false;

      if (e.isClose) {
        this.tableData = [];
        this.pageNo = 1;
        this.getSnapUserList();
      }
    },
    openAddModel(type,data={}) {
      this.typeId = data.id
      this.addVisible = true
    },
    openSnapModel(type, data = {}) {
      this.visible = true;
      this.modeType = type;
      if (type == 1) {
        this.dialogTitle = "新增人员库";
      } else {
        this.dialogTitle = "编辑人员库";
        this.currentUserInfo = data;
      }
    },

    async getSnapUserList() {
      let res = await getSnapUserList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      });

      if (res.code == 200) {
        res.data.lists.forEach((item) => {
          item.isWarn = item.isWarning == 1 ? true : false;
        });
        this.tableData = Array.from(
            new Set([...this.tableData, ...res.data.lists])
        );

        this.totalCount = res.data.count;
      }
    },

    //删除人员库
    async delSnapUser(data) {
      let res = await delSnapUser({id: data.id});
      if (res.code == 200) {
        this.$message({
          message: "删除成功",
          type: "success",
        });

        this.tableData = [];
        this.pageNo = 1;
        this.getSnapUserList();
      }
    },

    handleSizeChange(e) {
      this.pageSize = e;
      this.pageNo = 1;
      this.tableData = [];
      this.getSnapUserList();
    },
    handleCurrentChange(e) {
      this.pageNo = e;
      this.tableData = [];
      this.getSnapUserList();
    },
    handleClick(scope) {
      console.log(scope, "tablescope");
    },

    async onChangeInput(data, e) {
      await editSnapUser({
        id: data.id,
        typeName: data.typeName,
        isWarning: data.isWarning,
        warningType: e,
      });
    },

    async onChangeSwitch(data, e) {
      await switchStatus({
        id: data.id,
        isWarning: e ? 1 : 0,
      });
    },
    // async onChangeSwitch2(data, e) {
    //   await switchStatus({
    //     id: data.id,
    //     isWarning: e ? 1 : 0,
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
.add-user-btn {
  width: 118px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  background: #5cfbff;
  color: #17181A;
  border-radius: 4px;
  cursor: pointer;
}

.opration-btn {
  display: inline-block;
  color: #fff;
  background: #40414d;
  border-radius: 4px;
  cursor: pointer;
  padding: 6px 12px;
  margin-right: 16px;
  margin-top: 16px;
}

.level-color {
  display: inline-block;
  width: 16px;
  height: 16px;
}

.table-pagination {
  text-align: right;
  margin: 30px 0;
}

.left20 {
  margin-left: 20px;
}
</style>

<style>
.el-radio__label {
  padding-left: 5px;
}

.el-radio__inner {
  background: transparent;
  border: 1px solid #fff !important;
}

.el-radio {
  color: #fff !important;
}

.el-radio__input.is-checked .el-radio__inner {
  background-color: #5cfbff;
}

.el-radio__input.is-checked + .el-radio__label {
  color: #5cfbff;
}
</style>
